<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>门票核销 - 探索世界后台管理系统</title>
  <!-- 引入Vue.js框架 -->
  <script src="/js/vue.js"></script>
  <!-- 引入elementUI的css -->
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <!-- 引入elementUI的js -->
  <script src="/js/index.js"></script>
  <!-- 引入axios HTTP客户端 -->
  <script src="/js/axios.min.js"></script>
  <style>
    :root {
      --primary-color: #2c5f3e;
      --secondary-color: #4a7c59;
      --accent-color: #8fbc8f;
      --text-color: #333;
      --bg-color: #f0f8f0;
      --card-bg: #ffffff;
      --border-color: #8fbc8f;
    }

    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
      padding: 0;
      height: 100%;
    }

    .container {
      max-width: 100%;
      background-color: var(--card-bg);
      padding: 20px;
      height: 100%;
      overflow-y: auto;
    }

    header {
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--accent-color);
    }

    h1 {
      font-size: 2.2em;
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .subtitle {
      color: var(--secondary-color);
      font-size: 1.1em;
    }

    .section {
      margin-bottom: 30px;
      background-color: #fdfdfd;
      padding: 20px;
      border-radius: 6px;
      border-left: 4px solid var(--accent-color);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .section-title {
      color: var(--primary-color);
      font-size: 1.5em;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--accent-color);
    }

    p {
      margin-bottom: 12px;
      font-size: 1em;
      line-height: 1.8;
    }

    .verification-form {
      max-width: 500px;
      margin: 0 auto;
      padding: 30px;
      background: #f9f9f9;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: var(--primary-color);
    }

    .form-group input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .form-group input:focus {
      outline: none;
      border-color: var(--accent-color);
      box-shadow: 0 0 5px rgba(143, 188, 143, 0.5);
    }

    .btn-verify {
      width: 100%;
      padding: 12px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn-verify:hover {
      background-color: var(--secondary-color);
    }

    .result-card {
      margin-top: 20px;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
    }

    .result-success {
      background-color: #f0f9eb;
      border: 1px solid #e1f3d8;
      color: #67c23a;
    }

    .result-error {
      background-color: #fef0f0;
      border: 1px solid #fde2e2;
      color: #f56c6c;
    }

    .verification-code-display {
      font-size: 32px;
      font-weight: bold;
      letter-spacing: 5px;
      padding: 15px;
      background-color: #f5f5f5;
      border-radius: 8px;
      margin: 15px 0;
    }

    .order-info {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 6px;
      margin: 15px 0;
    }

    .order-info-item {
      margin-bottom: 10px;
      display: flex;
    }

    .order-info-label {
      font-weight: bold;
      width: 100px;
      color: var(--primary-color);
    }

    footer {
      text-align: center;
      margin-top: 40px;
      color: var(--secondary-color);
      font-size: 0.9em;
      padding-top: 15px;
      border-top: 1px solid var(--accent-color);
    }

    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }
      
      h1 {
        font-size: 1.8em;
      }
      
      .section {
        padding: 15px;
      }
      
      .verification-form {
        padding: 15px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>门票核销</h1>
    <p class="subtitle">验证游客取票验证码并完成门票核销</p>
  </header>

  <div class="section">
    <h2 class="section-title">核销操作</h2>
    <div class="verification-form">
      <div class="form-group">
        <label for="orderNo">订单号：</label>
        <input type="text" id="orderNo" v-model="verificationForm.orderNo" placeholder="请输入订单号">
      </div>
      
      <div class="form-group">
        <label for="verificationCode">取票验证码：</label>
        <input type="text" id="verificationCode" v-model="verificationForm.verificationCode" placeholder="请输入6位取票验证码">
      </div>
      
      <button class="btn-verify" @click="verifyTicket" :disabled="verifying">
        <span v-if="!verifying">验证并核销</span>
        <span v-else>验证中...</span>
      </button>
      
      <div v-if="verificationResult !== null" :class="['result-card', verificationResult ? 'result-success' : 'result-error']">
        <div v-if="verificationResult">
          <h3>核销成功！</h3>
          <p>门票已成功核销</p>
          <div class="verification-code-display">{{ orderInfo.ticketVerificationCode }}</div>
          <div class="order-info">
            <div class="order-info-item">
              <span class="order-info-label">订单号：</span>
              <span>{{ orderInfo.orderNo }}</span>
            </div>
            <div class="order-info-item">
              <span class="order-info-label">订单状态：</span>
              <span>已取票</span>
            </div>
            <div class="order-info-item">
              <span class="order-info-label">取票人：</span>
              <span>{{ orderInfo.orderQpname }}</span>
            </div>
            <div class="order-info-item">
              <span class="order-info-label">联系电话：</span>
              <span>{{ orderInfo.orderQprsj }}</span>
            </div>
          </div>
        </div>
        <div v-else>
          <h3>核销失败</h3>
          <p>{{ errorMessage }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <h2 class="section-title">操作说明</h2>
    <p><strong>1. 获取信息：</strong>请游客提供订单号和取票验证码</p>
    <p><strong>2. 输入信息：</strong>在上方表单中输入订单号和验证码</p>
    <p><strong>3. 执行核销：</strong>点击"验证并核销"按钮完成核销操作</p>
    <p><strong>4. 确认结果：</strong>系统会显示核销结果，核销成功后订单状态将更新为"已取票"</p>
  </div>

  <footer>
    <p>© 2025 探索世界后台管理系统</p>
  </footer>
</div>

<script>
  new Vue({
    el: '.container',
    data() {
      return {
        verificationForm: {
          orderNo: '',
          verificationCode: ''
        },
        verifying: false,
        verificationResult: null,
        errorMessage: '',
        orderInfo: {}
      };
    },
    methods: {
      verifyTicket() {
        // 重置结果
        this.verificationResult = null;
        this.errorMessage = '';
        
        // 基本验证
        if (!this.verificationForm.orderNo) {
          this.errorMessage = '请输入订单号';
          this.verificationResult = false;
          return;
        }
        
        if (!this.verificationForm.verificationCode) {
          this.errorMessage = '请输入取票验证码';
          this.verificationResult = false;
          return;
        }
        
        if (this.verificationForm.verificationCode.length !== 6) {
          this.errorMessage = '取票验证码应为6位数字';
          this.verificationResult = false;
          return;
        }
        
        // 开始验证
        this.verifying = true;
        
        // 发送请求到后端验证并核销
        axios.post('/order/verifyTicket', null, {
          params: {
            orderNo: this.verificationForm.orderNo,
            verificationCode: this.verificationForm.verificationCode
          }
        })
        .then(response => {
          if (response.data.code === 200) {
            this.verificationResult = true;
            // 获取订单详细信息用于显示
            this.fetchOrderInfo();
          } else {
            this.verificationResult = false;
            this.errorMessage = response.data.message || '核销失败';
          }
        })
        .catch(error => {
          this.verificationResult = false;
          this.errorMessage = '网络错误，请稍后重试';
          console.error('核销请求失败:', error);
        })
        .finally(() => {
          this.verifying = false;
        });
      },
      
      fetchOrderInfo() {
        // 获取订单详细信息
        axios.get('/order/queryByNo/' + this.verificationForm.orderNo)
          .then(response => {
            if (response.data.code === 200) {
              this.orderInfo = response.data.data;
            }
          })
          .catch(error => {
            console.error('获取订单信息失败:', error);
          });
      }
    }
  });
</script>
</body>
</html>